<template>
  <div>
    <div class="swiper">
      <Swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <SwipeItem v-for="item in detail.duck_img_list" :key="item">
          <img :src="item">
        </SwipeItem>
      </Swipe>
    </div>
    <!-- 展示选择的规格 -->
    <div class="sku" @click="mask=true">
      <span v-for="(item,index) in pro.pro_sku" :key="index">
        {{ item.sku_color_title }} : {{ item.sku_color }}
      </span>
    </div>

    <div :class="mask == true ? 'sku_select_active' : 'sku_select'">
      <div class="sku_detail">

        <div class="detail_title" @click="mask=false">
          X
        </div>

        <div class="sku_title">
          {{ detail.sku_color_title }}:
        </div>
        <div class="sku_list">
          <span 
            :class="top_index==index ? 'select' : ''"
          @click="top_index = index"
          v-for="(item,index) in detail.sku_color" :key="index">
            {{ item.color }}
          </span>
        </div>
        <div class="sku_title">
          {{ detail.sku_size_title }}:
        </div>
        <div class="sku_list">
          <span 
          :class="bottom_index==index ? 'select' : ''"
          @click="bottom_index = index"
          v-for="(item,index) in detail.sku_size" :key="index">
            {{ item.size }}
          </span>
        </div>
        <div class="price">
          金额: {{ pro.pro_price }}
        </div>
        <div class="tab" @click="submit()">
          加入购物车
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getProductDesc,addCartList } from "@/api";
import { Swipe, SwipeItem } from 'vant';
export default {
  components: {
    Swipe,
    SwipeItem
  },
  data() {
    return {
      obj: {
        admin_id: -1,
        product_id: -1,
      },
      mask:false,
      pro: {
        pro_sku: [
          {
            sku_color_title: '颜色',
            sku_color:'待选择'
          },
          {
            sku_color_title: '大小',
            sku_color: '待选择'
          }
        ],
        pro_num: 1,
        pro_title: '',
        pro_img:'',
        pro_price:0,
        pro_id: -1
      },
      top_index:0,
      bottom_index: 0,
      detail: {
        duck_desc: "",
        duck_hot: 0,
        duck_img: "http://192.168.17.126/static/1677833316680.jpg",
        duck_img_list: [],
        duck_img_type: "2",
        duck_look: 0,
        duck_max_price: "299",
        duck_min_price: "199",
        duck_name: " 爱慕儿童在逃公主女孩短袖吊带睡裙套装AK144B801 ",
        duck_no_price: "355",
        num: 9999,
        sku_color:[],
        sku_color_title: "颜色",
        sku_id: 5,
        sku_size: [],
        sku_size_title: "尺码",
      },
    };
  },
  watch:{
    top_index(nVal){
      this.pro.pro_sku[0].sku_color = this.detail.sku_color[nVal].color;
      this.isPrice()
    },
    bottom_index(nVal){
      this.pro.pro_sku[1].sku_color = this.detail.sku_size[nVal].size;
      this.isPrice()
    },
  },
  created() {
    this.obj = this.$route.query;
    this.getDesc();
  },
  methods: {
    submit(){
      // 调用接入购物车接口
      addCartList(this.pro).then(res => {
        if(res.data.code == 1){
          this.$Message.success('加入成功');
          this.mask = false;
        }
      })
    },
    getDesc() {
      if (this.obj.admin_id == -1 || this.obj.product_id == -1) {
        this.$router.back();
        return;
      }
      getProductDesc(this.obj).then((res) => {
        // console.log();
        this.detail = res.data.result[0];
        this.detail.duck_img_list = res.data.result[0].duck_img_list.replace("'[","").replace("]'","").replace(/["]+/g,"").split(',')
        this.detail.sku_color = JSON.parse(this.detail.sku_color);
        this.detail.sku_size = JSON.parse(this.detail.sku_size);
        this.pro.pro_sku[0].sku_color_title = this.detail.sku_color_title;
        this.pro.pro_sku[0].sku_color = this.detail.sku_color[0].color;
        this.pro.pro_sku[1].sku_color_title = this.detail.sku_size_title;
        this.pro.pro_sku[1].sku_color = this.detail.sku_size[0].size;
        this.pro.pro_id = this.detail.ID;
        this.pro.pro_img = this.detail.duck_img;
        this.pro.pro_title = this.detail.duck_name;
        this.isPrice()
      });
    },
    isPrice(){
      if(this.detail.sku_type == 1){
        this.pro.pro_price = this.detail.sku_size[this.bottom_index].price;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
  .swiper{
    width:100%;
    height:220px;
    img{
      width:100%;
      height:220px;
    }
  }

  .sku{
    height:30px;
    line-height:30px;
    text-indent:2em;
    background-color:#eee;
    &:active{
      background-color: #e5e5e5;
    }
  }

  .sku_select,
  .sku_select_active{
    position: fixed;
    left: 0;
    top: 110vh;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.3);
    transition: all 0.5s;
    .sku_detail{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 60vh;
      background-color: #fff;
      border-radius: 15px 15px 0 0;
      box-sizing: border-box;
      padding: 2% 5%;
      .sku_title{
        height: 30px;
      }
      .sku_list{
        span{
          display: inline-block;
          height: 25px;
          line-height: 20px;
          border-radius: 13px;
          padding: 3px 10px;
          background-color: #999;
          font-size: 13px;
          color: #fff;
          margin-right: 10px;
          margin-bottom: 7px;
        }
        .select{
          background-color: salmon;
        }
      }
      .tab{
        height: 30px;
        line-height: 30px;
        border-radius: 15px;
        text-align: center;
        color: #fff;
        background-color: salmon;
        width: 70%;
        margin-left: 15%;
        margin-top: 50px;
      }
    }
  }
  .sku_select_active{
    top:0;
  }
</style>